<template>
  <page title="教室资料">
    <el-row justify="space-between">
      <el-col :span="3">
        <el-button type="primary" @click="addClassroom">新增教室</el-button>
      </el-col>
      <el-col :span="15" style="text-align: end">
        <el-form inline>
          <el-form-item label="归属管理部门">
            <el-select v-model="part" placeholder="全部">
              <el-option
                  v-for="item in parts"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="教室名">
            <el-input prefix-icon="el-icon-search" v-model="searchKey"></el-input>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
    <el-table :data="table" header-cell-class-name="table-header">
      <el-table-column
          prop="name"
          label="教室名">
      </el-table-column>
      <el-table-column
          prop="seat"
          label="座位数">
      </el-table-column>
      <el-table-column
          label="是否用于会议">
        <template #default="scope">
          <template v-if="scope.row.session">
            是
          </template>
          <template v-else>
            否
          </template>
        </template>
      </el-table-column>
      <el-table-column
          prop="part.name"
          label="归属管理部门">
      </el-table-column>
      <el-table-column
          label="操作">
        <template #default="scope">
          <el-button
              type="text"
              @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
          <el-button
              type="text"
              @click="handleDelete(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-row justify="end" class="footer-pager">
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[8, 10, 12, 14, 16]"
          :page-size="currentSize"
          layout="sizes, prev, pager, next, jumper"
          :total="tableData.length">
      </el-pagination>
    </el-row>
  </page>
  <el-dialog title="新增教室" v-model="visible" width="35%">
    <el-form label-position="top">
      <el-space direction="horizontal" size="large" wrap>
        <el-form-item
            label="教室名">
          <el-input v-model="classroomForm.name"></el-input>
        </el-form-item>
        <el-form-item
            label="座位数">
          <el-input type="number" v-model="classroomForm.seat"></el-input>
        </el-form-item>
        <el-form-item
            label="是否用于会议">
          <el-select v-model="classroomForm.session">
            <el-option
                label="是"
                :value="true">
            </el-option>
            <el-option
                label="否"
                :value="false">
            </el-option>
          </el-select>
        </el-form-item>
      </el-space>
    </el-form>
    <template #footer>
      <el-button type="primary" @click="submit">保 存</el-button>
      <el-button @click="visible = false">取 消</el-button>
    </template>
  </el-dialog>
</template>

<script>
import Page from "@/components/Page";
import axios from "axios";
export default {
  name: "ClassroomData",
  components: {Page},
  data(){
    return{
      tableData:[{
        id:1,
        name:'报告厅',
        seat:200,
        session:true,
        part:{
          id:1,
          name:'办公室'
        }
      },{
        id:2,
        name:'视频教室',
        seat:50,
        session:false,
        part:{
          id:2,
          name:'社会培训学院'
        }
      }],
      part:'',
      parts:[{
        id:0,
        name:'全部'
      },{
        id:1,
        name:'社会培训学院'
      }],
      currentPage: 1,
      currentSize: 8,
      searchKey:'',

      visible:false,
      edit:false,
      classroomForm:{
        id:'',
        name:'',
        seat:'',
        session:true,
        part:null
      }
    }
  },
  methods:{
    handleEdit(index,row){
      console.log(index);
      row;
      this.edit = true;
      this.classroomForm = Object.assign(this.classroomForm,row);
      this.visible = true;
    },
    handleDelete(index,row){
      console.log(index);
      this.$confirm('确认删除此教室?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.deleteClassroomById(row.id)
      });
    },
    handleSizeChange(val) {
      this.currentSize = val;
    },
    handleCurrentChange(val) {
      this.currentPage = val;
    },
    addClassroom(){
      this.edit = false;
      this.classroomForm = {
        id:'',
        name:'',
        seat:'',
        session:true,
        part:null
      };
      this.visible = true;
    },
    submit(){
      if(this.edit){
        this.updateClassroom(this.classroomForm)
      }else{
        this.findCurrentUserId();
      }
      this.visible = false;
    },
    findAllClassroom(){
      axios.get(this.$host+"/classroom").then(response =>{
        if(response.data.code === 0){
          this.tableData = response.data.data;
        }else{
          this.$message.error(response.data.msg);
        }
      })
    },
    findAllPart(){
      axios.get(this.$host+"/part").then(response =>{
        if(response.data.code === 0){
          this.parts = response.data.data;
          this.parts.unshift({
            id:'0',
            name:'全部'
          });
        }else{
          this.$message.error(response.data.msg);
        }
      })
    },
    findCurrentUserId(){
      axios.get(this.$host+"/user/curId").then(response =>{
        if(response.data.code === 0){
          this.findPartByUserId(response.data.data);
        }
      })
    },
    findPartByUserId(userId){
      axios.get(this.$host+"/part/userId/"+userId).then(response =>{
        if(response.data.code === 0){
          this.classroomForm.part = response.data.data;
          this.insertClassroom(this.classroomForm);
        }else{
          alert(response.data.msg);
        }
      })
    },
    insertClassroom(data){
      console.log(data);
      axios.post(this.$host+"/classroom",data).then(response =>{
        if(response.data.code === 0){
          this.$message.success("添加成功");
          this.findAllClassroom();
        }else{
          this.$message.error(response.data.msg);
        }
      })
    },
    updateClassroom(data){
      axios.put(this.$host+"/classroom",data).then(response =>{
        if(response.data.code === 0){
          this.$message.success("修改成功");
          this.findAllClassroom();
        }else{
          this.$message.error(response.data.msg);
        }
      })
    },
    deleteClassroomById(id){
      axios.delete(this.$host+"/classroom/"+id).then(response =>{
        if(response.data.code === 0){
          this.$message.success("删除成功");
          this.findAllClassroom();
        }else{
          this.$message.error(response.data.msg);
        }
      })
    }
  },
  created() {
    this.findAllClassroom();
    this.findAllPart();
  },
  computed:{
    table(){
      return this.tableData.slice((this.currentPage-1)*this.currentSize,
          Math.min(this.currentPage*this.currentSize,this.tableData.length)).filter((value)=>{
        return this.part === ''||this.part ==='0'|| value.part.id === this.part;
      }).filter((value => {
        return this.searchKey === ''|| value.name.indexOf(this.searchKey) !== -1;
      }));
    }
  }
}
</script>

<style scoped>

</style>